import React, { useState, useEffect, useRef, useCallback } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { GlobalStyle } from './styles/GlobalStyle';
import { lightTheme, darkTheme } from './styles/theme';
import { useLocation } from 'react-router-dom';
import Masonry from 'react-masonry-css';
import ThemeToggle from './components/ThemeToggle';
import PostCard from './components/PostCard';
import { RiRobot2Fill } from 'react-icons/ri';
import { MdGesture } from 'react-icons/md';
import { IoShieldCheckmark } from 'react-icons/io5';

const Container = styled.div`
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  
  &::before, &::after {
    content: '';
    position: fixed;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(99, 102, 241, 0.05)'
      : 'rgba(99, 102, 241, 0.15)'};
    animation: move 25s linear infinite;
    z-index: -1;
  }

  &::before {
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(139, 92, 246, 0.07)'
      : 'rgba(139, 92, 246, 0.15)'};
    animation-delay: -12.5s;
    transform-origin: 0% 50%;
  }

  &::after {
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(99, 102, 241, 0.05)'
      : 'rgba(99, 102, 241, 0.1)'};
    animation-delay: 0s;
    transform-origin: 100% 50%;
  }

  @keyframes move {
    0% {
      transform: rotate(0deg) translate(15%, 0) rotate(0deg) scale(1);
      filter: blur(20px);
    }
    25% {
      transform: rotate(90deg) translate(15%, 0) rotate(-90deg) scale(1.2);
      filter: blur(25px);
    }
    50% {
      transform: rotate(180deg) translate(15%, 0) rotate(-180deg) scale(1);
      filter: blur(20px);
    }
    75% {
      transform: rotate(270deg) translate(15%, 0) rotate(-270deg) scale(1.2);
      filter: blur(25px);
    }
    100% {
      transform: rotate(360deg) translate(15%, 0) rotate(-360deg) scale(1);
      filter: blur(20px);
    }
  }
`;

const BackgroundGradient = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: ${props => props.theme.mode === 'dark'
    ? 'radial-gradient(circle at 50% -20%, rgba(99, 102, 241, 0.05), transparent 70vh), radial-gradient(circle at 50% 120%, rgba(139, 92, 246, 0.05), transparent 70vh)'
    : 'radial-gradient(circle at 50% -20%, rgba(99, 102, 241, 0.1), transparent 70vh), radial-gradient(circle at 50% 120%, rgba(139, 92, 246, 0.1), transparent 70vh)'};
`;

const MainContent = styled.div`
  position: relative;
  z-index: 1;
  backdrop-filter: ${props => props.theme.mode === 'dark' ? 'blur(100px)' : 'blur(100px)'};
  border-radius: 24px;
  padding: 2rem;
`;

const AppContainer = styled.div`
  min-height: 100vh;
  background-color: ${props => props.theme.background};
  color: ${props => props.theme.text};
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 0;
`;

const WatermarkGrid = styled.div`
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
  z-index: 1;
`;

const Watermark = styled.div`
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: 8vw;
  color: ${props => props.theme.text};
  opacity: 0.02;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-25deg);
  letter-spacing: -0.02em;
  padding: 2rem;
`;

const Title = styled.h1`
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin: 2rem 0;
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    ${props => props.theme.primary} 0%,
    ${props => `${props.theme.primary}80`} 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px ${props => `${props.theme.primary}40`});

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      ${props => props.theme.primary} 50%,
      transparent 100%
    );
    transform-origin: center;
    animation: lineShine 3s ease-in-out infinite;
  }

  @keyframes lineShine {
    0% {
      opacity: 0;
      transform: scaleX(0.5);
    }
    50% {
      opacity: 1;
      transform: scaleX(1);
    }
    100% {
      opacity: 0;
      transform: scaleX(0.5);
    }
  }
`;

const TitleContainer = styled.div`
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60px;
    height: 2px;
    background: linear-gradient(
      90deg,
      ${props => `${props.theme.primary}00`} 0%,
      ${props => props.theme.primary} 100%
    );
  }

  &::before {
    right: calc(100% + 20px);
    transform: translateY(-50%);
  }

  &::after {
    left: calc(100% + 20px);
    transform: translateY(-50%) rotate(180deg);
  }
`;

const StyledMasonry = styled(Masonry)`
  display: flex;
  gap: 1.5rem;
  width: 100%;

  .my-masonry-grid_column {
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
    background-clip: padding-box;
  }
`;

const LoadingText = styled.div`
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  margin: 2rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  backdrop-filter: blur(10px);
`;

const ErrorText = styled.div`
  text-align: center;
  color: #ff6b6b;
  font-size: 1.2rem;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 8px;
`;

const LoadingSpinner = styled.div`
  width: 30px;
  height: 30px;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: rgba(255, 255, 255, 0.7);
  animation: spin 1s linear infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
`;

const EmptyState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
`;

const EmptyIcon = styled.div`
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(65, 105, 225, 0.1), rgba(159, 122, 234, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(159, 122, 234, 0.3);
    border-radius: 4px;
    transform: rotate(45deg);
  }

  &::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(65, 105, 225, 0.2);
    border-radius: 50%;
    transform: translateX(-15px);
  }
`;

const EmptyTitle = styled.h2`
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: ${props => props.theme.textPrimary};
  font-weight: 600;
`;

const EmptyDescription = styled.p`
  font-size: 1rem;
  color: ${props => props.theme.textSecondary};
  max-width: 430px;
  line-height: 1.6;
`;

const MainContainer = styled.div`
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 2;
`;

const WelcomeContainer = styled.div`
  text-align: center;
  padding: 2.5rem 2.5rem;
  max-width: 900px;
  margin: -2vh auto 0;
  background: ${props => props.theme.mode === 'dark'
    ? 'rgba(28, 28, 30, 0.4)'
    : 'rgba(255, 255, 255, 0.4)'};
  border-radius: 24px;
  box-shadow: ${props => props.theme.mode === 'dark'
    ? '0 8px 32px rgba(0, 0, 0, 0.2)'
    : '0 8px 32px rgba(0, 0, 0, 0.05)'};
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  z-index: 3;

  @media (max-width: 768px) {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
    border-radius: 16px;
  }
`;

const WelcomeTitle = styled.h1`
  font-size: 3rem;
  background: ${props => props.theme.mode === 'dark'
    ? 'linear-gradient(135deg, #818cf8, #a78bfa)'
    : 'linear-gradient(135deg, #6366f1, #8b5cf6)'};
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;

  @media (max-width: 768px) {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
`;

const WelcomeText = styled.p`
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.8;
  color: ${props => props.theme.mode === 'dark'
    ? 'rgba(255, 255, 255, 0.85)'
    : props.theme.textSecondary};
  margin-bottom: 2rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 768px) {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .highlight {
    color: ${props => props.theme.mode === 'dark'
    ? '#818cf8'
    : '#6366f1'};
    font-weight: 500;
  }
`;

const WelcomeFeatures = styled.div`
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0 1rem;
  width: 100%;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0;
  }
`;

const StyledFeatureItem = styled.div`
  background: ${props => props.theme.mode === 'dark'
    ? 'rgba(0, 0, 0, 0.2)'
    : 'rgba(233, 233, 233, 0.1)'};
  padding: 2rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid ${props => props.theme.mode === 'dark'
    ? 'rgba(255, 255, 255, 0.1)'
    : 'rgba(160, 160, 160, 0.1)'}; 

  &:hover {
    transform: translateY(-5px);
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(0, 0, 0, 0.3)'
      : 'rgba(255, 255, 255, 0.3)'};
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 1.5rem;
    margin: 0 1rem;
  }
`;

const FeatureIcon = styled.div`
  margin-bottom: 1rem;
  color: ${props => props.theme.mode === 'dark'
    ? '#818cf8'
    : '#6366f1'};
  font-size: 2.5rem;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  
  svg {
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px ${props => props.theme.mode === 'dark'
      ? 'rgba(129, 140, 248, 0.3)'
      : 'rgba(99, 102, 241, 0.3)'});
  }

  ${StyledFeatureItem}:hover & {
    color: ${props => props.theme.mode === 'dark'
      ? '#a78bfa'
      : '#818cf8'};
    
    svg {
      transform: scale(1.1);
      filter: drop-shadow(0 0 12px ${props => props.theme.mode === 'dark'
        ? 'rgba(167, 139, 250, 0.5)'
        : 'rgba(129, 140, 248, 0.5)'});
    }
  }

  @media (max-width: 768px) {
    font-size: 2.25rem;
    height: 40px;
  }
`;

const FeatureTitle = styled.h3`
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: ${props => props.theme.mode === 'dark'
    ? 'rgba(255, 255, 255, 0.95)'
    : props.theme.text};
  font-weight: 600;
  transition: all 0.3s ease;

  @media (max-width: 768px) {
    font-size: 1.1rem;
  }
`;

const FeatureDescription = styled.p`
  font-size: 1rem;
  color: ${props => props.theme.mode === 'dark'
    ? 'rgba(255, 255, 255, 0.7)'
    : props.theme.textSecondary};
  line-height: 1.6;
  transition: all 0.3s ease;
  font-weight: 500;

  @media (max-width: 768px) {
    font-size: 0.9rem;
    line-height: 1.5;
  }
`;

const WelcomeButton = styled.a`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: white;
  background: ${props => props.theme.mode === 'dark'
    ? 'linear-gradient(135deg, #818cf8, #a78bfa)'
    : 'linear-gradient(135deg, #6366f1, #8b5cf6)'};
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 10;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: skewX(-25deg);
    transition: all 0.75s ease;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: ${props => props.theme.mode === 'dark'
      ? '0 4px 20px rgba(129, 140, 248, 0.4)'
      : '0 4px 20px rgba(99, 102, 241, 0.4)'};
    filter: brightness(1.1);

    &::before {
      left: 100%;
      transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    }
  }

  &:active {
    transform: translateY(0);
    filter: brightness(0.95);
  }

  &::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: ${props => props.theme.mode === 'dark'
      ? 'linear-gradient(135deg, #818cf8, #a78bfa)'
      : 'linear-gradient(135deg, #6366f1, #8b5cf6)'};
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
  }

  &:hover::after {
    animation: pulse 1.5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
  }

  @keyframes pulse {
    0% {
      opacity: 0;
      transform: scale(1);
    }
    50% {
      opacity: 0.15;
    }
    100% {
      opacity: 0;
      transform: scale(1.3);
    }
  }

  @media (max-width: 768px) {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    width: calc(100% - 2rem);
    margin: 0 1rem;
  }
`;

const FeaturePopup = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: ${props => props.theme.mode === 'dark'
    ? 'rgba(28, 28, 30, 0.95)'
    : 'rgba(255, 255, 255, 0.95)'};
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  z-index: 1000;
  box-shadow: 0 10px 40px ${props => props.theme.mode === 'dark'
    ? 'rgba(0, 0, 0, 0.3)'
    : 'rgba(0, 0, 0, 0.1)'};
  backdrop-filter: blur(10px);
  border: 1px solid ${props => props.theme.mode === 'dark'
    ? 'rgba(255, 255, 255, 0.1)'
    : 'rgba(0, 0, 0, 0.1)'};
  animation: popIn 0.3s cubic-bezier(0.19, 1, 0.22, 1);

  @keyframes popIn {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @media (max-width: 768px) {
    width: 85%;
    padding: 1.5rem;
  }
`;

const PopupOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: ${props => props.theme.mode === 'dark'
    ? 'rgba(0, 0, 0, 0.5)'
    : 'rgba(0, 0, 0, 0.3)'};
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 999;
  animation: fadeIn 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(28, 28, 30, 0.3)'
      : 'rgba(255, 255, 255, 0.2)'};
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
`;

const PopupTitle = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: ${props => props.theme.mode === 'dark'
    ? '#818cf8'
    : '#6366f1'};
  font-size: 1.5rem;
  font-weight: 600;

  svg {
    font-size: 2rem;
  }
`;

const PopupContent = styled.div`
  color: ${props => props.theme.text};
  line-height: 1.8;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
`;

const PopupClose = styled.button`
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: ${props => props.theme.textSecondary};
  cursor: pointer;
  padding: 0.5rem;
  transition: all 0.3s ease;
  border-radius: 50%;

  &:hover {
    color: ${props => props.theme.text};
    background: ${props => props.theme.mode === 'dark'
      ? 'rgba(255, 255, 255, 0.1)'
      : 'rgba(0, 0, 0, 0.05)'};
  }

  svg {
    width: 20px;
    height: 20px;
  }
`;

const FeatureItem = ({ icon, title, description, details }) => {
  const [showPopup, setShowPopup] = useState(false);

  return (
    <>
      <StyledFeatureItem onClick={() => setShowPopup(true)}>
        <FeatureIcon>{icon}</FeatureIcon>
        <FeatureTitle>{title}</FeatureTitle>
        <FeatureDescription>{description}</FeatureDescription>
      </StyledFeatureItem>

      {showPopup && (
        <>
          <PopupOverlay onClick={() => setShowPopup(false)} />
          <FeaturePopup>
            <PopupClose onClick={() => setShowPopup(false)}>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </PopupClose>
            <PopupTitle>
              {icon}
              {title}
            </PopupTitle>
            <PopupContent>
              {details}
            </PopupContent>
          </FeaturePopup>
        </>
      )}
    </>
  );
};

const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [initialLoad, setInitialLoad] = useState(true);
  const [isDarkTheme, setIsDarkTheme] = useState(true);
  const location = useLocation();
  const loadingRef = useRef(false);
  const observerRef = useRef(null);
  const lastPostRef = useRef(null);

  const breakpointColumns = {
    default: 3,
    1100: 2,
    700: 1
  };

  const fetchPosts = useCallback(async (page = 1) => {
    if (loadingRef.current) return;
    loadingRef.current = true;

    try {
      const identifierKey = location.pathname.slice(1);
      if (!identifierKey) {
        setLoading(false);
        setPosts([]);
        return;
      }

      //对identifierKey进行url解码
      const encodedIdentifierKey = decodeURIComponent(identifierKey);
      console.log(encodedIdentifierKey);

      const response = await fetch(`https://www.cyberweak.com/api/getList`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ page, key: encodedIdentifierKey })
      });

      if (response.status === 404) {
        setPosts([]);
        setHasMore(false);
        setLoading(false);
        setInitialLoad(false);
        loadingRef.current = false;
        return;
      }

      if (!response.ok) {
        throw new Error('Failed to fetch posts');
      }

      const { data, pagination } = await response.json();

      if (page === 1) {
        setPosts(data);
      } else {
        setPosts(prev => [...prev, ...data]);
      }

      setHasMore(pagination.current < pagination.totalPages);
      setCurrentPage(pagination.current);

    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
      setInitialLoad(false);
      loadingRef.current = false;
    }
  }, [location.pathname]);

  const handleDelete = async (postId, identifierManagerKey) => {

    //对identifierManagerKey进行url解码
    const encodedIdentifierManagerKey = decodeURIComponent(identifierManagerKey);
    try {
      const response = await fetch('https://www.cyberweak.com/api/marks/delete', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          id: postId,
          identifierManagerKey: encodedIdentifierManagerKey
        })
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || 'Failed to delete post');
      }

      setPosts(prev => prev.filter(post => post.id !== postId));
    } catch (error) {
      console.error('Error deleting post:', error.message);
    }
  };

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  // 设置 Intersection Observer
  useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        const lastEntry = entries[0];
        if (lastEntry.isIntersecting && hasMore && !loadingRef.current) {
          fetchPosts(currentPage + 1);
        }
      },
      { threshold: 0.5 }
    );
    observerRef.current = observer;

    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [fetchPosts, currentPage, hasMore]);

  // 监听最后一个帖子
  useEffect(() => {
    const lastPost = lastPostRef.current;
    const observer = observerRef.current;

    if (lastPost && observer) {
      observer.observe(lastPost);
      return () => observer.unobserve(lastPost);
    }
  }, [posts]);

  useEffect(() => {
    setCurrentPage(1);
    setPosts([]);
    setHasMore(true);
    setInitialLoad(true);
    fetchPosts(1);
  }, [location.pathname, fetchPosts]);

  return (
    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
      <BackgroundGradient />
      <AppContainer>
        <Container>
          <WatermarkGrid>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
            <Watermark>Shadow-Mark</Watermark>
          </WatermarkGrid>
          <GlobalStyle />
          <ThemeToggle isDark={isDarkTheme} toggleTheme={toggleTheme} />
          <MainContent>
            <MainContainer>
              <TitleContainer>
                <Title>我的 Shadow-Mark</Title>
              </TitleContainer>
              {!location.pathname.slice(1) ? (
                <WelcomeContainer>
                  <div className="light-orb orb1"></div>
                  <div className="light-orb orb2"></div>
                  <div className="light-orb orb3"></div>
                  <div className="light-orb orb4"></div>
                  <div className="light-orb orb5"></div>
                  <WelcomeTitle>欢迎来到 Shadow-Mark</WelcomeTitle>
                  <WelcomeText>
                    Shadow-Mark插件会在你浏览<span className="highlight">x.com</span>或者<span className="highlight">zhihu.com</span>的时候自动在页面为您添加shadow-mark按钮，此外，你也可以手动给任意网站的任意内容进行mark，采用的是匿名用户系统，完全不用担任何隐私风险。
                  </WelcomeText>
                  <WelcomeFeatures>
                    <FeatureItem
                      icon={<RiRobot2Fill />}
                      title="自动集成"
                      description="浏览推特或者知乎时自动添加shadow-mark按钮"
                      details="Shadow-Mark 插件会智能识别你正在浏览的网页。当你访问 Twitter 或知乎时，插件会自动在页面合适的位置添加 mark 按钮，你可以一键mark感兴趣的内容。这个按钮插入页面功能完全自动化，无需任何手动操作。"
                    />
                    <FeatureItem
                      icon={<MdGesture />}
                      title="灵活标记"
                      description="可以标记任意网站的任意内容"
                      details="除了支持推特和知乎等网站的自动集成外，Shadow-Mark 还允许你在任何网站上标记任意内容。shadow-mark插件提供「标记内容」按钮，点击后鼠标进入拾取模式,可以拾取任意网站的任意内容。这种灵活的标记方式让你可以在互联网上自由收藏任何感兴趣的内容。"
                    />
                    <FeatureItem
                      icon={<IoShieldCheckmark />}
                      title="隐私保护"
                      description="匿名用户系统，完全不用担心隐私问题"
                      details="我们采用完全匿名的用户系统，不需要注册账号，不收集任何个人信息。每个用户都会获得一个随机生成的唯一标识符，用于管理自己的收藏内容。这种设计确保了你的隐私安全，让你可以放心使用所有功能。"
                    />
                  </WelcomeFeatures>
                  <WelcomeButton href="https://gitee.com/frankfan1990/shadow-mark" target="_blank">
                    获取插件
                  </WelcomeButton>
                </WelcomeContainer>
              ) : (
                <>
                  {initialLoad ? (
                    <LoadingText>
                      <div className="loading-spinner"></div>
                      <span>Loading...</span>
                    </LoadingText>
                  ) : error ? (
                    <ErrorText>{error}</ErrorText>
                  ) : (
                    <>
                      {posts.length === 0 && !loading ? (
                        <EmptyState>
                          <EmptyIcon />
                          <EmptyTitle>暂无收藏</EmptyTitle>
                          <EmptyDescription>
                            你还没有添加任何收藏，当你加收藏后，它们会显示在这。
                          </EmptyDescription>
                        </EmptyState>
                      ) : (
                        <>
                          <StyledMasonry
                            breakpointCols={{
                              default: 4,
                              1400: 3,
                              1100: 2,
                              700: 1
                            }}
                            className="masonry-grid"
                            columnClassName="masonry-grid_column"
                          >
                            {posts.map((post, index) => (
                              <div
                                key={post.id}
                                ref={index === posts.length - 1 ? lastPostRef : null}
                              >
                                <PostCard post={post} onDelete={(postId) => handleDelete(postId, location.pathname.slice(1))} />
                              </div>
                            ))}
                          </StyledMasonry>
                          {loading && (
                            <LoadingText>
                              <div className="loading-spinner"></div>
                              <span>Loading more...</span>
                            </LoadingText>
                          )}
                        </>
                      )}
                    </>
                  )}
                </>
              )}
            </MainContainer>
          </MainContent>
        </Container>
      </AppContainer>
    </ThemeProvider>
  );
};

export default App;
